<template>
	<view class="container">
		<view class="name_part">
			<image :src="detailinfo.avatar?  detailinfo.avatar:'../../static/img/detailInfo/detailavatar.png'" mode=""></image>
			<view class="age">
				<view class="">
					{{detailinfo.name}}
				</view>
				<view class="add_age">
					成都 /{{detailinfo.age}}岁
				</view>
			</view>
		</view>
		<view class="detail_content">
			{{detailinfo.content}}
		</view>
		<view class="detail_content_img">
			<image v-if="detailinfo.image" :src="  detailinfo.image[0]" mode=""></image>
		</view>
		<view class="upload_part">
			<view class="time">
				{{$utils.happenTimeFun(detailinfo.createTime)}}
			</view>
			<view class="img_status">
				<view class="" @click="showForward">
					<image src="../../static/img/detailInfo/zhuan.png" mode=""></image>
				</view>
				<view class="weixin">
					<image src="../../static/img/detailInfo/zan.png" mode="" @click="thumbsup"></image>
					<view class="weixin_num" v-if="detailinfo.hadFines > 0" @click="thumbsup">
						{{detailinfo.hadFines}}
					</view>
				</view>
				<view class="weixin" @click="who='';replyId=id">
						<image src="../../static/img/detailInfo/weixin.png" mode=""></image>
						<view class="weixin_num" v-if="detailinfo.reply.length > 0">
							{{detailinfo.reply.length}}
						</view>
				</view>
			</view>
		</view>
		<Blank></Blank>
		<view class="bottom_reply_list">
			<view  v-for="(item,index) in replyList" :key="index" class="reply_list" @click="replywho(item)">
				<view class="reply_left_part">
					<image :src="item.replyAvatar?  item.replyAvatar:'../../static/img/detailInfo/detailavatar.png'" mode="" class="avartar"></image>
					<view class="">
						<view class="name">
					         {{item.replyName}}
						</view>
						<view class="content">
					       {{item.content}}
						</view>
						<view class="reply_num">
					      <view class="">
					      	查看{{item.num}}条回复
					      </view>
						  <image src="../../static/img/detailInfo/back.png" mode="" class="more_btn"></image>
						</view>
					</view>
					<view class="time">
						<text>{{$utils.happenTimeFun(item.createTime)}}</text>
					</view>
				</view>
				
				<view class="reply_right_part">
                   {{item.time}}
				</view>
			</view>
		</view>
		
		<view class="fixed_btn">
			<input v-model="content"  :placeholder="who||'留下你的精彩评论'" placeholder-style="color:#939292;font-size:26rpx" />
			<button @click="replyDynamic()" type="default">发表</button>
			<!-- <image src="../../static/img/detailInfo/zhuan.png" mode=""></image>
			<image src="../../static/img/detailInfo/zan.png" mode=""></image>
			<image src="../../static/img/detailInfo/weixin.png" mode=""></image> -->
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="" :content="forwardText" :before-close="true" @close="close" @confirm="forward"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import Blank from "../../components/blank.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			Blank,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				forwardText:'是否确定转发',
				id:null,
				detailinfo:{},
				content:"",
				replyList: [],
				replyId: null,
				who:''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.replyId = option.id
			this.dynamicDetail()
		},
		methods: {
			close(done) {
				done()
			},
			showForward(){
				this.forwardText = '是否确定转发'+this.detailinfo.name+'发布的【' + this.detailinfo.content+ '】'
				this.$refs.popup.open()
			},
			forward(){ //转发
				this.$utils.requert({url:'dynamic',data:{
					content: this.detailinfo.content,
					image: this.detailinfo.image,
					type: this.detailinfo.type
				},type:'post'}).then(res=>{
					if(res.code === 1 ){
							this.$utils.showLayer('转发成功')
					}else{    
						this.$utils.showLayer(res.message)
					}
					this.$refs.popup.close()
				})
			},
			thumbsup(index,id,fine){ //点赞
				this.$utils.requert({url:'fineEdit',data:{fineId:this.detailinfo.id},type:'post'}).then(res=>{
					if(res.code === 1 ){
						if(fine == 1) {
							this.detailinfo.hadFines = this.detailinfo.hadFines - 1
							this.$utils.showLayer('取消点赞')
							this.detailinfo.fine = 0
						}else {
							this.detailinfo.hadFines = this.detailinfo.hadFines + 1
							this.$utils.showLayer('点赞成功')
							this.detailinfo.fine = 1
						}
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			replywho(item){
				this.who = '@' + item.parentName + ' '
				this.content = '@' + item.parentName + ' '
				this.replyId = item.id
			},
			dynamicDetail(){
				this.$utils.requert({url:'dynamicDetail',data:{id:this.id},type:'post'}).then(res=>{
						if(res.code === 1 ){
							// this.$utils.showLayer(res.message)
							this.detailinfo = res.data
							this.replyList = res.data.reply
							this.content = ''
							this.who = ''
							this.replyId = this.id
						}else{    
							this.$utils.showLayer(res.message)
						}
				})
			},
			replyDynamic(){
				let data={
					replyId:this.id,
					content:this.content
				}
				this.$utils.requert({url:'replyDynamic',data:data,type:'post'}).then(res=>{
						if(res.code === 1 ){
							this.$utils.showLayer(res.message)
							this.dynamicDetail()
						}else{    
							this.$utils.showLayer(res.message)
						}
				})
			}	
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}
	.name_part{
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 38rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
		}
	.name_part image{
		width:110rpx;
		height: 110rpx;
		margin-right: 16rpx;
		border-radius: 50%;
	}
	.name_part .age{
		font-size: 32rpx;
		color: #363636;
	}
	.name_part .age .add_age{
		font-size: 24rpx;
		color: #A3A2A2;
	}
	.detail_content{
		font-size: 28rpx;
		color: #363636;
		margin-bottom: 20rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}
	.detail_content_img{
		width: 344rpx;
		color: 477rpx;
		margin-bottom: 35rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}
	.detail_content_img image{
		width: 344rpx;
		color: 477rpx;
	}
	.upload_part{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 36rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}
	.upload_part .time{
		font-size: 24rpx;
		color: #A3A2A2;
	}
	.upload_part .img_status{
		display: flex;
	}
	.upload_part .img_status image{
		width:34rpx;
		height: 34rpx;
		margin-left: 55rpx;
	}
	.upload_part .img_status .weixin{
		position: relative;
	}
	.upload_part .img_status .weixin .weixin_num{
		position: absolute;
		right: -16rpx;
		top:4rpx;
		font-size: 16rpx;
		color:#969696;
	}
	.bottom_reply_list{
		margin-bottom: 230rpx;
	}
	.reply_list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 25rpx 30rpx;
		box-sizing: border-box;
		margin-top:20rpx;
	}
	.reply_list:last-child{
		border-bottom: none;
	}
	.reply_list .reply_left_part{
		display: flex;
		align-items: center;
		width: 100%;
	}
	.reply_left_part .time{
		font-size: 24rpx;
		margin-left: auto;
		
	}
	.reply_list .reply_left_part .avartar{
		width: 86rpx;
		height: 86rpx;
		margin-right: 22rpx;
		border-radius: 50%;
	}
	.reply_list .reply_left_part .name{
		font-size: 26rpx;
		color: #333333;
		/* margin-bottom: 25rpx; */
		margin-top: 30rpx;
	}
	.reply_list .reply_left_part .content{
		font-size: 30rpx;
		color: #333333;
		/* margin-bottom: 25rpx; */
		margin-top: 5rpx;
	}
	.reply_list .reply_left_part .reply_num{
		font-size: 22rpx;
		color: #6B6969;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	.reply_list .reply_left_part .reply_num image{
		width: 10rpx;
		height: 18rpx;
		margin-left: 11rpx;
	}
	.reply_list .reply_right_part{
		font-size: 22rpx;
		color: #6B6969;
	}
	.fixed_btn{
		position: fixed;
		bottom:0;
		left:0;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		width: 100%;
		height: 140rpx;
		line-height: 140rpx;
		border-top:1rpx solid #f6f6f6;
		background-color: #fff;
		padding:0 26rpx;
	}
	.fixed_btn button{
		width: 130rpx;
		height: 50rpx;
		font-size: 24rpx;
		background-color: #FB8408;
		color: #7a7a7a;
		color: #fff;
		line-height: 50rpx;
		/* margin-left: 35rpx; */
		border-radius: 70rpx;
	}
	.fixed_btn button::after{
		border: none;
	}
	.fixed_btn input{
		width: 520rpx;
		height: 65rpx;
		padding-left: 43rpx;
		border-radius: 80rpx;
		background-color: #E6E6E6;
		font-size: 28rpx;
		box-sizing: border-box;
		margin-right: 10rpx;
	}
	
</style>
